<template>
	<view>
		<commonHeader :showBack="false" :moreMenu="true" :navigationBarStyle="{iconText:'订单详情'}"></commonHeader>
		<view class="page-content" :style="{'padding-top': lineHeight + 'rpx'}">
			<view class="order-detail">
				<view class="justify-between align-center top">
					<view class="tag-title">
						订单信息
					</view>
					<view class="status" v-if="orderDetail.paymentState == 0">
						处理中
					</view>
					<view class="status" v-if="orderDetail.paymentState == 1">
						待付款
					</view>
					<view class="status" v-if="orderDetail.paymentState == 2">
						待发货
					</view>
					<view class="status" v-if="orderDetail.paymentState == 3">
						待收货
					</view>
					<view class="status" v-if="orderDetail.paymentState == 4">
						已完成
					</view>
				</view>
				<view class="content  center">
					<view class="item align-center">
						<view class="item-left">
							下单时间：
						</view>
						<view class="item-right">
							{{orderDetail.createTime}}
						</view>
					</view>
					<view class="item align-center">
						<view class="item-left">
							付款方式：
						</view>
						<view class="item-right">
							{{orderDetail.paymentMode}}
						</view>
					</view>
					<view class="item align-center">
						<view class="item-left">
							联系人：
						</view>
						<view class="item-right">
							{{orderDetail.receiveName}}
						</view>
					</view>
					<view class="item align-center">
						<view class="item-left">
							联系电话：
						</view>
						<view class="item-right">
							{{orderDetail.receivePhone}}
						</view>
					</view>
					<view class="item align-center">
						<view class="item-left">
							收货地址：
						</view>
						<view class="item-right">
							{{orderDetail.receiveAdress}}
						</view>
					</view>
				</view>
				<u-line color="#eee"></u-line>
				<view class="bottom">
					<view class="bottom-total justify-between align-center">
						<span>合计：</span>
						<span>¥{{orderDetail.orderPrice}}</span>
					</view>
					<view class="bottom-total justify-between align-center">
						<span>实付：</span>
						<span>¥{{orderDetail.price}}</span>
					</view>
				</view>
			</view>
			<view class="remark align-start">
				<view class="remark-title">
					我的备注:
				</view>
				<view class="remark-content">
					{{orderDetail.remark}}
				</view>
			</view>
			<view class="shopbody">
				<view class="align-center tag-title justify-between" @click="pushHome">
					<view class="align-center">
						<img :src="orderDetail.shopLogo" alt="" srcset="" class="shop-pic">
						<span>{{orderDetail.shopName}}</span>
					</view>
					<u-icon name="arrow-right" color="#000" size="14"></u-icon>
				</view>
				<view class="" v-for="(sku,subIndex) in orderDetail.skus" :key="subIndex">
					<view class="gitem">
						<view class="left" @click="imgListPreview(sku.image)">
							<image class="img" referrerpolicy="no-referrer" :src="sku.image"
								@click="imgListPreview(sku.image)" />
							<view class="search">
								<u-icon name="search" color="#e8756d" size="20"></u-icon>
							</view>
						</view>
						<view class="right">
							<view class="name line-2">
								{{sku.productName}}
							</view>
							<view class="spac"></view>
							<view class="ops align-center">
								<view class="space-title">
									规格
								</view>
								<view class="space-content">
									{{sku.value}}
								</view>
							</view>
							<view class="price-count justify-between align-center ">
								<view class="count">
									<span>x</span> {{sku.number}}
								</view>
								<view class="price">
									<span class="unit">￥</span>
									<span class="price">{{sku.price}}</span>
								</view>
							</view>
						</view>
					</view>
					<u-line color="#eee"></u-line>
				</view>
			</view>

		</view>
		<view class="total">

			<view class="order-button align-center justify-end">
				<button class="button-o" @click="clickHandler" >
					联系商家
				</button>
				<u-action-sheet :safeAreaInsetBottom="true" cancelText="取消" :actions="phoneList" @select=""
					@close="showCall = false" :show="showCall" :closeOnClickOverlay="true"></u-action-sheet>
				
			</view>
		</view>
	</view>
</template>

<script>
	import store from '@/store';
	export default {

		data() {
			return {
				count: 0,
				showCoupon: false,
				showOrderSuccessfullyModal: false,
				address: undefined,
				list: [],
				getSettlement: null,
				orderId: '',
				state: 0,
				orderDetail: {},
				lineHeight: 0,
				showCall: false,
				phoneList: [{
						name: '',
						disabled: true
					},
					{
						name: '拨打',
					},
				],
			}
		},
		onLoad(e) {
			console.log(e, 'e.orderId');
			this.orderId = e.orderId
			this.state = e.state
			this.orderById()
			uni.$on('getHeight', res => {
				console.log(res, 'getHeight');
				this.lineHeight = res.ktxStatusHeight + 84;
			})

		},
		created() {
			this.getCurrentUserReceive()
			this.getCart().then((res) => {
				this.getSettlement2()
			})
		},
		methods: {
			orderById() {
				this.$http.get("order/getById", {
					orderId: this.orderId
				}).then(res => {
					this.orderDetail = res
					console.log(this.address, '123');
				}).catch(res => {
					console.log(res, 1234);
				})
			},
			getCurrentUserReceive() {
				this.$http.get("receive/getCurrentUserReceive", {}).then(res => {
					this.address = res
					console.log(this.address, '123');
				}).catch(res => {
					console.log(res, 1234);
				})
			},
			// 购物车列表
			async getCart() {
				const shopInfo = uni.getStorageSync('shopInfo');

				await this.$http.get("cart/getCart", {
					shopId: shopInfo.shopId
				}).then(res => {
					this.list = res
				})
			},
			// 购物车总计
			getSettlement2() {
				const param = {
					shops: [
						// 	{
						// 	shopId: 187,
						// 	skus: [{
						// 		ifLogistics: 1,
						// 		number: 3,
						// 		selected: 1,
						// 		skuId: 1
						// 	}]
						// },
					]
				}
				this.list.forEach((item, index) => {
					param.shops.push({
						shopId: item.shopId,
						skus: []
					})
					item.skus.forEach((subItem, subIndex) => {
						param.shops[index].skus.push({
							ifLogistics: subItem.ifLogistics,
							number: subItem.number,
							selected: subItem.selected,
							skuId: subItem.skuId
						})
					})
				})
				this.$http.post("order/getSettlement2", param).then(res => {
					res.total = 0
					res.number = 0
					res.shops.forEach((item, index) => {
						res.total = res.total + item.total
						res.number = res.number + item.number
					})
					this.getSettlement = res
				})
			},
			clickHandler() {
				const shopInfo = uni.getStorageSync('shopInfo');
				// 如果为手机号模式，拨打电话
				uni.makePhoneCall({
					phoneNumber: shopInfo.chargePersonPhone
				})
				this.$emit('click')
			},
			imgListPreview(image) {
				var urlList = [image]
				uni.previewImage({
					indicator: "number",
					loop: true,
					urls: urlList
				})
			},
			pushHome() {
				uni.$emit('homeAuthorShow', {
					show: true,
					shopId: this.orderDetail.shopId
				})
				uni.switchTab({
					url: '/pages/home/home?shopId=' + this.orderDetail.shopId
				});
			}
		}
	};
</script>

<style lang="scss" scoped>
	.page-content {
		padding-bottom: 380rpx;
	}

	.remark {
		width: 700rpx;
		margin: 25rpx;
		box-sizing: border-box;
		border-radius: 12rpx;
		box-shadow: 0px 2rpx 24rpx 0px rgba(51, 51, 51, 0.1200);
		background: #FFFFFF;
		padding: 25rpx;
		.remark-title {
			color: #999;
			padding-right: 20rpx;
		}
		.remark-content {
			flex: 1;
			word-break: break-all;
		}
	}

	.shopbody {
		width: 700rpx;
		margin: 25rpx;
		box-sizing: border-box;
		border-radius: 12rpx;
		box-shadow: 0px 2rpx 24rpx 0px rgba(51, 51, 51, 0.1200);
		background: #FFFFFF;

		.tag-title {
			position: relative;
			height: 80rpx;
			line-height: 80rpx;
			padding: 0 25rpx 0 25rpx;
			font-size: 32rpx;
			color: #333;
			border-bottom: 1px solid #eee;
			margin-bottom: 15rpx;

			.shop-pic {
				width: 50rpx;
				height: 50rpx;
				border-radius: 50%;
				// border: 18rpx solid #FFFFFF;
				box-shadow: 0px 2rpx 24rpx 0px rgba(51, 51, 51, 0.1200);
				border-radius: 50%;
				margin-right: 20rpx;
			}
		}

		.gitem {
			width: 100%;
			height: 215rpx;
			padding: 20rpx 25rpx;
			display: flex;
			background: #fff;
			box-sizing: border-box;

			.left {
				width: 205rpx;
				height: 140rpx;
				position: relative;

				.img {
					width: 205rpx;
					height: 140rpx;
					box-shadow: 0px 2px 24px 0px rgba(51, 51, 51, 0.12);
					border-radius: 8rpx;
				}

				.search {
					position: absolute;
					bottom: 0;
					right: 0;
					background: #FFFFFF;
					border-top-left-radius: 8rpx;
				}
			}

			.right {
				flex: 1;
				height: 100%;
				padding-left: 20rpx;

				.name {
					width: 420rpx;
					font-size: 32rpx;
					font-family: PingFang SC;
					font-weight: 600;
					color: #333333;
					line-height: 39rpx;
					margin-bottom: 16rpx;
				}

				.ops {
					.space-title {
						width: 88rpx;
						font-size: 26rpx;
						font-weight: 400;
						color: #fff;
						background: #FA625D;
						border-radius: 4rpx;
						text-align: center;
					}

					.space-content {
						height: 45rpx;
						line-height: 45rpx;
						font-size: 26rpx;
						border-radius: 4rpx;
						font-weight: 400;
						color: #333333;
						margin-left: 20rpx;
					}
				}

				.price-count {
					margin-top: 10rpx;

					.count {
						font-size: 32rpx;
						color: #666666;

						span {
							font-size: 24rpx !important;
							padding-right: 5rpx;
						}
					}

					.price {
						.unit {
							font-size: 30rpx;
							font-family: SF UI Text;
							font-weight: 400;
							color: #333;
							line-height: 48rpx;
							height: 28px;
						}

						.price {
							font-size: 40rpx;
							font-family: SF UI Text;
							font-weight: bold;
							color: #333;
							line-height: 48rpx;
							height: 28px;
						}
					}

					.u-number-box,
					.u-number-box__minus,
					.u-number-box__plus {
						height: 58rpx !important;
					}
				}
			}
		}

		.product-total {
			height: 80rpx;
			line-height: 80rpx;

			.title {
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #666666;
			}

			.price {
				padding-right: 10rpx;
				padding-left: 10rpx;

				.unit {
					font-size: 28rpx;
					font-family: SF UI Text;
					font-weight: 400;
					color: #E86C64;
					line-height: 48rpx;
					height: 28px;
				}

				.price {
					font-size: 40rpx;
					font-family: SF UI Text;
					font-weight: bold;
					color: #E86C64;
					line-height: 48rpx;
					height: 28px;
				}
			}
		}
	}

	.order-detail {
		width: 700rpx;
		margin: 25rpx;
		box-sizing: border-box;
		border-radius: 12rpx;
		box-shadow: 0px 2rpx 24rpx 0px rgba(51, 51, 51, 0.1200);
		background: #FFFFFF;

		.top {
			border-bottom: 1px solid #eee;
			height: 90rpx;
			line-height: 90rpx;

			.tag-title {
				position: relative;
				padding: 0 25rpx 0 46rpx;
				font-size: 32rpx;
				color: #333;
			}

			.tag-title::before {
				position: absolute;
				top: 50%;
				left: 25rpx;
				width: 8rpx;
				height: 30rpx;
				line-height: 30rpx;
				background-color: #FA625D;
				transform: translateY(-50%);
				content: "";
				border-radius: 4rpx;
			}

			.status {
				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #E86C64;
				padding-right: 25rpx;
			}
		}

		.center {
			margin: 0 29rpx;

			.item {
				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #333333;
				line-height: 39rpx;
				height: 64rpx;

				.item-left {
					color: #666;
					text-align: right;
					width: 150rpx;
				}
			}

			.item-border {
				height: 1rpx;
				background: #999999;
				opacity: 0.2;
			}
		}

		.bottom {
			padding-top: 20rpx;
			padding-bottom: 20rpx;

			.bottom-total {
				margin: 0 27rpx;

				span:first-child {
					color: #666666;
					font-size: 30rpx;
					font-family: PingFang SC;
					font-weight: 400;
				}

				span:last-child {
					font-size: 36rpx;
					font-weight: 400;
					color: #E86C64;
				}
			}

		}
	}

	.total {
		position: fixed;
		bottom: 0rpx;
		// height: 280rpx;
		width: 100%;
		background: #FFFFFF;
		box-shadow: 0px 1rpx 8rpx 0px rgba(153, 153, 153, 0.1200);
		z-index: 999;

		.total-price {
			flex: 1;
			padding: 19rpx 25rpx;
			border-bottom: 2rpx solid #eee;

			.title {
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #666666;
			}

			.price {
				.unit {
					font-size: 28rpx;
					font-family: SF UI Text;
					font-weight: bold;
					color: #E86C64;
					height: 28px;
					padding: 0 0 0 15rpx;
				}

				.price {
					font-size: 36rpx;
					font-family: SF UI Text;
					font-weight: bold;
					color: #E86C64;
				}
			}
		}

		.order-button {
			height: 110rpx;
			margin-right: 20rpx;

			.button-o {
				width: 138rpx;
				height: 64rpx;
				line-height: 64rpx;
				background: #FE7E27;
				border-radius: 32rpx;
				text-align: center;
				font-size: 24rpx;
				color: #FFFFFF;
			}
		}
	}

	/deep/ .u-number-box__input {
		width: 100rpx !important;
	}
</style>
